<template>
    <div class="main real-box">
        <div class="top-panel">
            <div class="search-pane">
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-button type="primary" ghost size="small">查询</a-button>
                </div>
                <div class="search-item-box">
                    <a-button type="default" class="reset-btn" size="small">重置</a-button>
                </div>
            </div>
            <div class="btn">
                <a-button type="primary" @click="addRules">添加</a-button>
            </div>
        </div>
        <div class="table-box">
            <div class="table-contain">
                <a-table :columns="columns" :data-source="data" :rowKey="data => data.id"
                         :loading="loading" :pagination="false">
                    <template slot="type" slot-scope="data">
                        <a-tag :color="data.rulesNumber == '00' ? '#f50' : (data.rulesNumber == '01' ? '#ffa912' : (data.type == '02' ? '#12a0ff' : '#30d7ff'))">
                            {{ data.rulesNumber == '00' ? '尖' : (data.rulesNumber == '01' ? '峰' : (data.rulesNumber ==
                            '02' ? '平' : '谷')) }}
                        </a-tag>
                    </template>
                    <template slot="cost" slot-scope="data">
                        {{data.cost}}元/度
                    </template>
                    <template slot="serviceCost" slot-scope="data">
                        {{data.serviceCost}}元/度
                    </template>
                    <template slot="action" slot-scope="data">
                        <a-icon type="edit" class="icon-box" style="margin-right: 10px"
                                @click.stop="editRules(data.id)"/>
                        <a-icon type="delete" class="icon-box" @click.stop="editRules(data.id)"/>
                    </template>
                </a-table>
            </div>
            <div class="page-box">
                <a-pagination
                        size="small"
                        :showQuickJumper="true"
                        :showSizeChanger="true"
                        :current="page.current"
                        :pageSize="page.pageSize"
                        :total="page.total"
                        :show-total="(total) => `共${total}条`"
                        @showSizeChange="onShowSizeChange"
                        @change="changePageSize"
                ></a-pagination>
            </div>
        </div>
        <AddTimeRules ref="timeRules" :title="title" @reloadList="queryList">></AddTimeRules>
    </div>
</template>

<script>
    import moment from "moment";
    import {api, post} from "../../api/api";
    import AddTimeRules from "@/view/report/components/AddTimeRules";

    export default {
        name: "TimeRate",
        components: {AddTimeRules},
        data() {
            return {
                data: [],
                columns: [
                    {title: '开始时间', dataIndex: 'startTime'},
                    {title: '结束时间', dataIndex: 'endTime'},
                    {title: '所属桩', dataIndex: 'pileName', key: 'pileName'},
                    {title: '费率', scopedSlots: {customRender: 'type'}},
                    {title: '电费费率', scopedSlots: {customRender: 'cost'}},
                    {title: '服务费费率', scopedSlots: {customRender: 'serviceCost'}},
                    {title: '分段时序', dataIndex: 'serialNumber', key: 'serialNumber'},
                    {title: '所属电站', dataIndex: 'stationName', key: 'stationName'},
                    {title: '操作', scopedSlots: {customRender: 'action'}},
                ],
                page: {
                    current: 1,
                    pageSize: 20,
                    total: 0,
                },
                loading: true,
                moment,
                title: ''
            }
        },
        created() {
            this.queryList()
        },
        methods: {
            queryList() {
                post(api.RulesUnitEntities, {page: this.page.current, limit: this.page.pageSize}).then(res => {
                    this.data = res.data.data
                    this.page.total = res.data.count
                    this.loading = false
                    this.data.forEach(function (item, index) {
                        if (item.rulesNumber == '00') {
                            item.cost = item.tipCost
                            item.serviceCost = item.tipServiceCost
                        } else if (item.rulesNumber == '01') {
                            item.cost = item.peakCost
                            item.serviceCost = item.peakServiceCost
                        } else if (item.rulesNumber == '02') {
                            item.cost = item.flatCost
                            item.serviceCost = item.flatServiceCost
                        } else if (item.rulesNumber == '03') {
                            item.cost = item.valleyCost
                            item.serviceCost = item.valleyServiceCost
                        }
                    })
                })
            },
            addRules() {
                this.title = '新增分时段计费规则'
                this.$refs.timeRules.show()
            },
            editRules(id) {
                this.title = '编辑分时段计费规则'
                this.$refs.timeRules.show(id)
            },
            onShowSizeChange(current, pageSize) {
                this.page.current = current
                this.page.pageSize = pageSize
                this.queryList()
            },
            changePageSize(current, pageSize) {
                this.page.current = current
                this.page.pageSize = pageSize
                this.queryList()
            },
        }
    }
</script>

<style scoped>

</style>
